<template>
  <div style="padding: 6px;min-height: 500px">
    <div class="clearfix">
      <div style="float: right" >
        <el-button type="primary" size="small" icon="el-icon-plus" @click="addGys">添加供应商</el-button>
        <el-button type="primary" size="small" icon="el-icon-refresh" @click="loadGys">刷新</el-button>
      </div>
      <div style="clear: both"></div>
    </div>

    <el-row :gutter="16">
      <el-col :span="8" v-for="(item,index) in gysObj.list" :key="item.id">
        <el-card class="box-card" style="position: relative">
          <div slot="header" class="clearfix">
            <span style="font-size: 18px;font-weight: bold">{{item.name}}</span>
            <el-popconfirm style="float: right"
              confirmButtonText='确认' cancelButtonText='取消'
              icon="el-icon-info" iconColor="red"
              title="确认要删除吗？" @confirm="deleteGys(item.id)">
              <span slot="reference" style="color: #f10631;">删除</span>
            </el-popconfirm>
            <span style="color: #409eff;float: right;margin-right: 5px;" @click="editGys(item.id)">修改</span>
          </div>
          <div style="height: 25vh;overflow-y: auto;">
            <div class="divnr">供应商描述：{{item.descption}}</div>
            <div class="divnr">私有化报价：{{item.jiage}}</div>
            <div class="divnr">公有云报价：{{item.jiagenet}}</div>
            <el-divider content-position="left">服务明细</el-divider>
            <div style="padding: 0 6px 0 16px" v-html="item.fuwudesc"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog :title="popupTitle" :visible.sync="entityDetailVisible" :close-on-click-modal="false" width="1160px" append-to-body>
      <GysDetail v-if="entityDetailVisible" :visible.sync="entityDetailVisible" :entityId="popupEntityId" :xmId="xmId"></GysDetail>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
import GysDetail from "@/views/xiangmu/gysDetail";
export default {
  components:{GysDetail},
  props:{
    xmId : {type : Number, default: 0}
  },
  data() {
    return {
      sd: {
        xmId:this.xmId,
        pageNum: 1,
        pageSize: 12
      },
      gysObj: {},
      entityDetailVisible : false,
      popupTitle : '',
      popupEntityId : 0,
    }
  },
  mounted() {
    this.loadGys()
    this.$EventBus.$on("gysadd", () => {
      this.sd.pageNum = 1;
      this.loadGys();
    });
    this.$EventBus.$on("gysedit", () => {
      this.loadGys();
    });
  },
  beforeDestroy() {
    this.$EventBus.$off("gysadd")
    this.$EventBus.$off("gysedit")
  },
  methods: {
    loadGys() {
      request({
        url: '/gys/pagegys',
        data: this.sd
      }).then(res => {
        const { data } = res
        this.gysObj = data
      })
    },
    addGys(){
      this.popupEntityId = 0;
      this.popupTitle= "新增供应商"
      this.entityDetailVisible= true
    },
    editGys(id){
      this.popupEntityId= id;
      this.popupTitle= "修改供应商"
      this.entityDetailVisible= true
    },
    deleteGys(id){
      request({
        url: '/gys/deletegys',
        data: {id : id}
      }).then(res => {
        if(res.code === '200') {
          this.$message.success(res.msg)
          this.loadGys();
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
div.divnr{
  text-indent: 16px;
  font-size: 14px;
  color: #666666;
  line-height: 30px;
}
</style>
